<template>
	<view class="auth-page m-h100 pb-5">
		<view class="fs-32 text-white py-2 flex align-center justify-center position-relative ">
			<u-icon class="position-absolute top-0 left-0 mt-2 ml-2" name="arrow-left" color="#fff" size="34"
				@click="navback"></u-icon>
			<text>村民认证</text>
		</view>
		<view class=" mx-3  myinfo bgcolor1 rounded p-2" v-if="!isedit">
			<view class="fs-38 mb-2">王二麻子<text class="ftcolor4 fs-28 ml-1">(19199999999)</text></view>
			<view class="flex align-center fs-24 mb-2">身份证号：<text>1919999999919199999999</text></view>
			<view class="flex align-center fs-24 mb-2">归属地址：<text>射洪市太乙镇龙泉村</text></view>
			<view class="flex align-center fs-24 mb-2">详细地址：<text>射洪市太乙镇龙泉村射洪市太乙镇龙泉村</text></view>
			<view class="flex ">
				<view class="flex align-center fs-24 rounded-circle bgcolor7 text-white edit">
					<u-icon name="edit-pen" color="#fff" size="28"></u-icon>
					<text class="fs-24 ml-1">编辑</text>
				</view>
			</view>
		</view>

		<view class="mx-3  myinfo bgcolor1 rounded p-2" v-if="isedit && getUser">
			<view class="flex flex-column mb-2">
				<text class="label mb-1">手机号</text>
				<u--input placeholder="请输入身份证号" border="surround" v-model="getUser.member_mobile" class="mb-2"
					placeholderClass="placeholder" readonly></u--input>
			</view>
			<view class="flex flex-column mb-2">
				<text class="label mb-1">归属地</text>
				<view class="border rounded">
					<uni-data-picker ref="picker" split="・" :clear-icon="false" :border="false" placeholder="请选择归属地"
						popup-title="请选择所在地区" :localdata="regionsList" v-model="classes" @nodeclick="onnodeclick">
					</uni-data-picker>
				</view>
			</view>
			<view class="flex flex-column mb-2">
				<text class="label mb-1">头像</text>
				<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="file" :maxCount="1"
					:previewFullImage="true" width="200" height="150"></u-upload>
			</view>
			<view class="flex flex-column mb-2">
				<text class="label mb-1">姓名</text>
				<u--input placeholder="请输入姓名" border="surround" v-model="name" class="mb-2"
					placeholderClass="placeholder"></u--input>
			</view>
			<view class="flex flex-column mb-2">
				<text class="label mb-1">性别</text>
				<u-radio-group v-model="sex" placement="row">
					<u-radio class="mr-2" size="14px" labelSize="14px" v-for="(item, index) in radiolist" :key="index"
						:label="item.sex" :name="item.value" @change="sexChange">
					</u-radio>
				</u-radio-group>
			</view>
			<view class="flex flex-column mb-2">
				<text class="label mb-1">身份证号</text>
				<u--input placeholder="请输入身份证号" border="surround" v-model="id_card" class="mb-2"
					placeholderClass="placeholder"></u--input>
			</view>
			<view class="flex flex-column">
				<text class="label mb-1">详细地址</text>
				<u--textarea v-model="address" placeholder="请输入详细地址" height="100" placeholderClass="placeholder"
					class="mb-2"></u--textarea>
			</view>
		</view>
		<view class="text-white text-center py-1 rounded-circle mt-5 submit mx-3" :class="isdisabled?'bgcolor7':'bgcolor6'"
			@click="submit">确定</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import BaseApi from '@/api/baseApi'
	import serviceApi from '@/api/serviceApi.js'
	import config from '@/config'
	export default {
		data() {
			return {
				isedit: true,
				phone: '',
				classes: '',
				name: '',
				id_card: '',
				address: '',
				fileList: [],
				sex: '',
				radiolist: [{
						sex: '男',
						value: 1
					},
					{
						sex: '女',
						value: 2
					},
				]
			}
		},
		computed: {
			...mapGetters(['getRegions', 'getUser']),
			isdisabled() {
				return this.name && this.id_card && this.address && this.sex && this.fileList.length
			},
			regionsList() {
				this.getRegions.forEach(i => {
					if (i.children && i.children.length) {
						i.children = i.children.filter(j => j.text !== '全部')
						i.children.forEach(k => {
							if (k.children && k.children.length) {
								k.children = k.children.filter(l => l.text !== '全部')
							}
						})
					}
				})
				return this.getRegions
			}
		},
		created() {
			const curRegion = uni.getStorageSync('region_id')
			console.log('curRegion', curRegion)
			if (curRegion) {
				this.classes = curRegion.toString()
			} else {
				this.classes = this.getUser && this.getUser.region_id.toString() || ''
			}
		},
		methods: {
			async afterRead(event) {
				console.log(event)
				let lists = [].concat(event.file)
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await uni.$tools.uploadFile(
						`${config.api}/api/uni_member/upload`,
						lists[i].url, {
							region_id: uni.getStorageSync('region_id')
						},
					)
					this.fileList.splice(i, 1, {
						status: 'success',
						message: '',
						url: result.path
					})
					console.log(result)
				}
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			submit() {
				console.log(this.fileList)
				if(!this.isdisabled)return
				serviceApi.gz_cmrz_act({
					name: this.name,
					id_card:this.id_card,
					img:this.fileList[0].url,
					sex:this.sex,
					address:this.address
				}).then(res => {
					uni.showToast({
						title:res.msg
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				})
			},
			onnodeclick(e) {
				const key = e.value.split('-')
				console.log('key----', e);
				if (e.level === 3) {
					this.classes = e.id
				}
			},
			navback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.auth-page {
		background-image: url('/static/images/total_income_bg.png');
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 100%;

		.myinfo {
			.label {
				color: #666;
			}
		}

		.edit {
			padding: 5rpx 20rpx;
		}
	}
</style>